<style>
ul.multisort {
	float: left;
	width: 20%;
}
ul.multisort  li {
	margin: 2px !important;
	padding: 2px !important;
	background: #ccc !important;
	cursor: pointer;
}
</style>

<p>You should be able to reorder the list by dragging. The new order displays below the list. You should be able to move items from one list to another.</p>

<ul id="SortableExample1" class="multisort">
		<li id="1">First</li>
		<li id="2">Second</li>

		<li id="3">Third</li>
</ul>
<ul id="SortableExample2" class="multisort">
		<li id="4">Four</li>
		<li id="5">Five</li>
		<li id="6">Six</li>
</ul>
<ul id="SortableExample3" class="multisort">
		<li id="7">Seven</li>

		<li id="8">Eight</li>
		<li id="9">Nine</li>
</ul>
<div id="order" style="clear:both"></div>

<script src="/depender/build?require=More/Sortables"></script>
<script>
var mySort = new Sortables($$('ul.multisort'), {
	clone: true,
	opacity: 0.6,
	onComplete: function(){
		$('order').set('html', 'order: ' + mySort.serialize())
	}
});
</script>
